<template>
  <div>
  <section class="section product">
    <div class="container">
      <h2 class="h2 section-title">当前秒杀时间段商品</h2>
      <div>
        本场剩余时间
        <span id="_h">00时</span>
        <span id="_m">00分</span>
        <span id="_s">00秒</span>
      </div>
      <ul class="product-list">
        <li v-for="product in tableData" :key="product.name" class="product-item">
          <div class="product-card">
            <figure class="card-banner">
              <img :src="product.pic" loading="lazy"
                   class="image-contain">
              <div class="card-badge">{{ product.tag || '秒杀商品' }}</div>
              <ul class="card-action-list">
                <li class="card-action-item">
                  <button class="card-action-btn el-icon-goods" aria-labelledby="card-label-10" @click="handleBuy(product)">
                  </button>
                  <div class="card-action-tooltip" id="card-label-10">立即抢购</div>
                </li>
              </ul>
            </figure>

            <div class="card-content"
                 style="height: 150px;display: flex;flex-direction: column;justify-content:space-between;">
              <h3 class="h3 card-title">{{ product.name }}</h3>
              <data class="card-price">秒杀价¥ {{ product.promotionPrice }}</data>
              <data class="card-price">原价¥ {{ product.price }}</data>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </section>
    <el-dialog title="秒杀商品订单" :visible.sync="dialogFormVisible" width="80%">
      <el-form label-width="150px" size="small">
        <el-form-item label="收件人">
          <el-input
              :rows="1"
              placeholder="请输入收件人姓名"
              v-model="receiverName">
          </el-input>
        </el-form-item>

        <el-form-item label="联系方式">
          <el-input
              :rows="1"
              placeholder="请输入收件人电话"
              v-model="receiverPhone">
          </el-input>
        </el-form-item>

        <el-form-item label="收货地址" :inline="true">
          <el-input v-model="province" autocomplete="off" placeholder="请输入省份" style="width: 200px">
            <template slot="append">省</template>
          </el-input>
          <el-input v-model="city" autocomplete="off" placeholder="请输入城市" style="width: 200px">
            <template slot="append">市</template>
          </el-input>
          <el-input v-model="district" autocomplete="off" placeholder="请输入区" style="width: 200px">
            <template slot="append">区</template>
          </el-input>
          <el-input v-model="receiverAddress" autocomplete="off" placeholder="请输入详细地址" style="width: 250px">
          </el-input>
        </el-form-item>

        <el-form-item label="商品信息">
          <el-table :data="productList">
            <el-table-column prop="pic" label="商品图片" width="125" align="center">
              <template v-slot="scope">
                <el-image :src="scope.row.pic" ></el-image>
              </template>
            </el-table-column>
            <el-table-column  prop="name" label="商品名称" align="center" width="250">
            </el-table-column>
            <el-table-column prop="price" label="商品原价" align="center">
            </el-table-column>
            <el-table-column prop="promotionPrice" label="秒杀价" align="center">
            </el-table-column>
            <el-table-column  label="数量" align="center" width="160">
              <div>1</div>
            </el-table-column>
            <el-table-column label="总金额" align="center" >
              <template slot-scope="scope">
                <div style="color: orangered">{{scope.row.promotionPrice}}</div>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="订单总金额">
          <div>{{this.product.price}}</div>
        </el-form-item>

        <el-form-item label="优惠金额">
          <div>{{this.product.price - this.product.promotionPrice}}</div>
        </el-form-item>

        <el-form-item label="应付金额">
          <div>{{this.product.promotionPrice}}</div>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="textarea">
          </el-input>
        </el-form-item>
      </el-form>
      <el-button class="r" type="primary" @click="handleSubmit">提交订单</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SpikeActivity",
  data(){
    return {
      memberId:localStorage.getItem("id"),
      user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) :{},
      productName:[],
      tableData:[],
      totalPrice:0,
      receiverName:'',
      receiverPhone:'',
      receiverAddress:'',
      totalNum:0,
      order:{},
      product:{},
      productList:{},
      textarea:'',
      endTime:'',
      dialogFormVisible:false,
      orderId:'',
      orderItem:{},
      district:'',
      city:'',
      province:''
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.request.get("/spikeSessions/nowProduct", {
      }).then(res => {
        console.log(res)
        this.tableData = res.data
      })

      this.request.get("/spikeSessions/getEndTime", {
      }).then(res => {
        this.endTime = res.data
        console.log("endTime"+this.endTime)
        this.countTime()
      })


    },
    handleBuy(product){
      this.textarea = ''
      this.receiverAddress=''
      this.receiverPhone=''
      this.receiverName=''
      this.productList = [product]
      this.product = product
      this.dialogFormVisible = true
    },
    countTime(){
      //获取当前时间
      let date = new Date();
      let now = date.toLocaleTimeString()
      //设置截止时间
      let str = this.endTime
      let str1 = str.split(':')
      let now1 = now.split(':')
      let hour = parseInt(str1[0]);
      let minute = parseInt(str1[1])
      let second = parseInt(str1[2])
      let hour1 = parseInt(now1[0]);
      let minute1 = parseInt(now1[1])
      let second1 = parseInt(now1[2])
      let endTime = second+minute*60+hour*60*60
      let nowTime = second1+minute1*60+hour1*60*60
      let leftTime = endTime - nowTime
      let hour2 = Math.floor(leftTime/60/60)
      let minute2 = Math.floor((leftTime-hour2*60*60)/60)

      //定义变量 h,m,s保存倒计时的时间
       let h,m,s;
       if (leftTime>=0) {
          h = Math.floor(leftTime/60/60)
          m = Math.floor((leftTime-h*60*60)/60)
          s = leftTime - m*60 - h*60*60
       }else{
         this.load()
       }
       //将倒计时赋值到div中
       document.getElementById("_h").innerHTML = h+"时";
       document.getElementById("_m").innerHTML = m+"分";
       document.getElementById("_s").innerHTML = s+"秒";
       //递归每秒调用countTime方法，显示动态时间效果
       setTimeout(this.countTime,1000);
    },
    handleSubmit(){

      this.order.payAmount = this.product.promotionPrice
      this.order.payType = 0
      this.order.sourceType = 0
      this.order.status = 0
      this.order.orderType = 0
      this.order.note = this.textarea
      this.order.memberUsername = this.user.nickname
      this.order.receiverProvince  = this.province
      this.order.receiverCity = this.city
      this.order.receiverRegion = this.district
      this.order.memberId = this.memberId
      this.order.totalAmount = this.product.price
      this.order.promotionAmount = this.product.price - this.product.promotionPrice
      this.order.receiverName = this.receiverName
      this.order.receiverPhone = this.receiverPhone
      this.order.receiverDetailAddress = this.receiverAddress

      console.log(this.product)
      this.request.post("/order/buy",JSON.stringify(this.order)).then(res=>{
        if(res){
          this.$message.success("下单成功，请及时支付")
          this.orderId = res.data
          this.dialogFormVisible = false
          this.addOrderItem()
          this.load()
        }else{
          this.$message.error("服务器开小差啦")
          this.dialogFormVisible = false
        }
      })
    },
    addOrderItem(){
      let spData ='[{"key":"颜色","value":"默认"},{"key":"尺寸","value":"默认"}]'
      this.orderItem.orderId= this.orderId
      this.orderItem.productId = this.product.id
      this.orderItem.productPic = this.product.pic
      this.orderItem.productName = this.product.name
      this.orderItem.productSn = this.product.productSn
      this.orderItem.productPrice = this.product.price
      this.orderItem.productQuantity = 1
      this.orderItem.realAmount = this.product.promotionPrice
      this.orderItem.promotionAmount = this.product.price - this.product.promotionPrice
      this.orderItem.spData = spData
      this.orderItem.productSubTitle = this.product.description
      this.request.post("/order/addOrderItem",JSON.stringify(this.orderItem)).then(res=>{
      })
    }
  }
}
</script>

<style scoped>
.r{
  position:absolute;
  right:5px;
  bottom:5px;
}
</style>